import React, { lazy, Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import { createHashRouter, Navigate, RouterProvider } from 'react-router-dom';
import MonitorSdk, { monitorSdk } from './../../../lib/index.esm';

const Home = lazy(() => import('./views/Home'));
const JsError = lazy(() => import('./views/JsError'));
const PromiseError = lazy(() => import('./views/PromiseError'));
const ResourcesError = lazy(() => import('./views/ResourcesError'));
const Exposure = lazy(() => import('./views/Exposure'));
const AutomaticBurialPoint = lazy(() => import('./views/AutomaticBurialPoint'));
const Xhr = lazy(() => import('./views/Xhr'));

const LongTask = lazy(() => import('./views/LongTask'));
const Perf = lazy(() => import('./views/Perf'));
const BehaviorRecorder = lazy(() => import('./views/BehaviorRecorder'));

MonitorSdk({
	pId: '1000', // 产品ID
	reportUrl: 'http://127.0.0.1:9001/report', // 上报的地址
	debug: true, // 是否开启debug，开启后打印控制台不上报
	jsErrorLog: true, // js异常
	// promiseErrorLog: true, // promise异常
	// resourcesErrorLog: true, // 资源加载异常
	// exposureLog: true, //  // 曝光
	// automaticBurialPointLog: true, // 自动埋点
	// pageDwellTimeLog: true, // 页面停留时间
	// pvLog: true, // PV
	// xhrLog: true, // 接口监控
	// longTaskLog: true, // 长任务
	// resourcesPerfLog: true, // 资源加载性能
	// perfLog: true, // 页面渲染性能
	behaviorRecorderLog: true, // 用户行为录制
});
setTimeout(() => {
	monitorSdk.report({
		type: 'custom',
		data: 'hulei',
	});
}, 1000);

const router = createHashRouter([
	{
		path: '/',
		element: <Navigate replace to='/home' />,
	},
	{
		path: '/home',
		element: <Home />,
	},
	{
		path: '/jsError',
		element: <JsError />,
	},
	{
		path: '/promiseError',
		element: <PromiseError />,
	},
	{
		path: '/resourcesError',
		element: <ResourcesError />,
	},
	{
		path: '/exposure',
		element: <Exposure />,
	},
	{
		path: '/automaticBurialPoint',
		element: <AutomaticBurialPoint />,
	},
	{
		path: '/xhr',
		element: <Xhr />,
	},
	{
		path: '/longTask',
		element: <LongTask />,
	},
	{
		path: '/perf',
		element: <Perf />,
	},
	{
		path: '/behaviorRecorder',
		element: <BehaviorRecorder />,
	},
]);

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<Suspense fallback={'Loading'}>
			<RouterProvider router={router}></RouterProvider>
		</Suspense>
	</React.StrictMode>
);
